<template>
    <el-row>
	  <el-col :span="4">
		   <el-input placeholder="请输入病历号搜索" v-model="query.caseNumber"/>
      </el-col>
	  <el-col :span="2">
	  		<el-button type="primary" plain @click="getRegister">搜索</el-button>
	  </el-col>
      <el-col :span="2">
            <el-button type="danger" @click="sendDrug">批量发药</el-button>
      </el-col>
    </el-row>
    <el-row style="height:50px;margin-top:20px;margin-bottom:10px">
        <el-col :span="8">姓名：{{register.realName}}</el-col>
        <el-col :span="8">身份证号：{{register.cardNumber}}</el-col>
        <el-col :span="8">住址：{{register.homeAddress}}</el-col>
    </el-row>
    <el-row>
         <el-col :span="24">
             <el-table :data="prescriptionList" @selection-change="handleSelectionChange">
                <!-- 这里的意思就是当后面的状态是已缴费的时候才能进行选择 -->
                 <!-- 当改变成已发药的时候，就不能进行选择了 -->
                 <el-table-column type="selection"  width="55" :selectable="selectable" />
                 <el-table-column type="index" width="50" />
                 <el-table-column label="药品名称" prop="drugInfo.drugName"></el-table-column>
                 <el-table-column label="药品规格" prop="drugInfo.drugFormat" />
                 <el-table-column label="用法用量" prop="drugUsage"></el-table-column>
                 <el-table-column label="数量" prop="drugNumber"/>
                 <el-table-column label="药品价格" prop="drugInfo.drugPrice" />
                 <el-table-column label="开立时间" prop="creationTime" />
                 <el-table-column label="状态" prop="drugState" />
             </el-table>
         </el-col>
     </el-row>
 </template>
 
 <script setup>
 import httpRequest from '@/common';
 import { ElMessage } from 'element-plus';
 import {ref,getCurrentInstance, onMounted,defineProps, watch, computed} from 'vue';
 
 const {proxy} = getCurrentInstance();

 //可以选择的选项
 const selectable = (row)=> row.drugState=='已缴费';
 

 
 //搜索条件   和搜索输入框进行了双向数据绑定
 const query = ref({
     caseNumber: ''
 })

 //挂号信息  包含了患者信息
 const register = ref({})
 
 //页面进入之后没有默认查询   点击搜索查询挂号信息
 const getRegister = ()=>{
    httpRequest(
        proxy,
        'post',
        '/register/case/'+query.value.caseNumber,
        null,
        resultBean=>{
            register.value = resultBean.data;
            //当前挂号对应的开药信息  register_id
            getPrescription();
        }
    )
 }

 //开药的列表
 const prescriptionList = ref([])

 //当前挂号对应的开药信息 
 const getPrescription = ()=>{

     httpRequest(
             proxy,
             'post',
             '/prescription/conditions',
             {
                registerId: register.value.id
             },
             resultBean=>{
                 prescriptionList.value = resultBean.data;
             }
         )
 
 }

//选中项的id集合
let selectOptions = ref([]);

//表格中多选框选中或取消时会触发  也就是选中项变化
const handleSelectionChange = (newSelection)=>{
    console.log('选中项改变',newSelection);
    selectOptions.value = []; //清空
    newSelection.forEach((selOp)=>{
        selectOptions.value.push(selOp.id);
    });
}

//点击批量发药会触发   执行发药  本质上就是修改发药信息的状态值  update prescription drug_state='已发药' where id in (1,2,3,4)
const sendDrug = ()=>{
    console.log(selectOptions.value);
	  if(selectOptions.value.length==0){
		  ElMessage.info('请选中至少一条记录之后再进行发药操作');  
		  return;
	  }
    httpRequest(
        proxy,
        'put',
        '/prescription/updatestate/已发药',
        selectOptions.value,
        resultBean=>{
            ElMessage.success('发药成功');
            //重新查询
            getPrescription();
        }
    )

}

 </script>
 
 <style>
 </style>